<template>
  <div>
    <el-card>
      <el-button
        type="primary"
        style="margin: 10px 10px"
        @click="clickFn('add')"
        >新增模板</el-button
      >
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="templateType" label="模板类型">
        </el-table-column>
        <el-table-column prop="transportType" label="运送类型">
        </el-table-column>
        <el-table-column prop="associatedCityList" label="关联城市">
        </el-table-column>
        <el-table-column prop="firstWeight" label="首重"> </el-table-column>
        <el-table-column prop="continuousWeight" label="续重">
        </el-table-column>
        <el-table-column prop="lightThrowingCoefficient" label="轻抛系数">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              type="text"
              style="color: #419eff"
              @click="clickFn('edit')"
              >编辑</el-button
            >
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" style="color: #f56c6c" @click="delFn(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :title="dialogTitle" :visible.sync="isDialogShow" @close="close">
      <el-form :model="formData" style="padding: 0 30px" :rules="rules">
        <el-form-item label="活动区域" label-width="100px" prop="templateType">
          <el-select
            v-model="formData.templateType"
            placeholder="请选择模板类型"
            style="width: 100%"
            @change="selectChange"
          >
            <el-option
              v-for="item in templateTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动区域" label-width="100px" prop="transportType">
          <el-select
            v-model="formData.transportType"
            placeholder="请选择运送类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in transportTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="关联城市"
          label-width="100px"
          prop="associatedCityList"
        >
          <span v-if="valueType !== 3">全国</span>
          <el-checkbox-group v-else v-model="formData.associatedCityList">
            <el-checkbox :label="'京津冀'"></el-checkbox>
            <el-checkbox :label="'江浙沪'"></el-checkbox>
            <el-checkbox :label="'川渝'"></el-checkbox>
            <el-checkbox :label="'黑吉辽'"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="首重价格" label-width="100px" prop="firstWeight">
          <el-input v-model="formData.firstWeight">
            <template #suffix
              ><span style="color: black; margin-right: 10px"
                >元</span
              ></template
            >
          </el-input>
        </el-form-item>
        <el-form-item
          label="续重价格"
          label-width="100px"
          prop="continuousWeight"
        >
          <el-input v-model="formData.continuousWeight">
            <template #suffix
              ><span style="color: black; margin-right: 10px"
                >元</span
              ></template
            >
          </el-input>
        </el-form-item>
        <el-form-item
          label="轻抛系数"
          label-width="100px"
          prop="lightThrowingCoefficient"
        >
          <el-input v-model="formData.lightThrowingCoefficient"></el-input>
        </el-form-item>
        <el-form-item style="margin-top: 30px">
          <el-row type="flex" justify="center">
            <el-button type="primary" @click="onSubmit">确认</el-button>
            <el-button @click="close">取消</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { delApi, getFreightListApi } from "@/api/organization-manage";
const transportTypeMap = { 1: "普快", 2: "特快" };
const templateTypeMap = {
  1: "同城寄",
  2: "省内寄",
  3: "经济区互寄",
  4: "跨省",
};
const associatedCityListMap = {
  1: "全国",
  2: "京津冀",
  3: "江浙沪",
  4: "川渝",
  5: "黑吉辽",
};
export default {
  name: "FreightManagePage",
  data() {
    return {
      valueType: "",
      drawType: "",
      isDialogShow: false,
      tableData: [],
      formData: {
        templateType: "",
        transportType: "",
        associatedCityList: [],
        firstWeight: "",
        continuousWeight: "",
        lightThrowingCoefficient: "",
      },
      rules: {
        templateType: [{ required: true, message: "请选择模板类型" }],
        transportType: [{ required: true, message: "请选择运送类型" }],
        associatedCityList: [{ required: true, message: "请选择关联城市" }],
        firstWeight: [{ required: true, message: "请输入首重价格" }],
        continuousWeight: [{ required: true, message: "请输入续重价格" }],
        lightThrowingCoefficient: [
          { required: true, message: "请输入轻抛系数" },
        ],
      },
      templateTypeOptions: [
        {
          value: 1,
          label: "同城寄",
        },
        {
          value: 2,
          label: "省内寄",
        },
        {
          value: 3,
          label: "经济区互寄",
        },
        {
          value: 4,
          label: "跨省",
        },
      ],
      transportTypeOptions: [
        {
          value: 1,
          label: "普快",
        },
        {
          value: 2,
          label: "特快",
        },
      ],
    };
  },
  created() {
    this.getFreightList();
  },
  computed: {
    dialogTitle() {
      return this.drawType === "add" ? "新增模板" : "添加模板";
    },
  },
  methods: {
    selectChange(value) {
      console.log(value);
      this.valueType = value;
    },
    clickFn(type) {
      this.drawType = type;
      this.isDialogShow = true;
      if (type === "add") {
        console.log(11);
      }
    },
    async delFn(id) {
      console.log(id);
      try {
        await this.$confirm("确定删除吗？");
        await delApi(id);
        this.$message.success("删除成功");
        this.getFreightList();
      } catch (err) {
        this.$message.info("取消删除");
      }
    },
    close() {
      this.isDialogShow = false;
    },
    async onSubmit() {
      this.isDialogShow = false;
    },
    async getFreightList() {
      const res = await getFreightListApi();
      console.log(res);
      this.tableData = res.data;

      // const res11 = [];
      this.tableData.forEach((item) => {
        item.transportType = transportTypeMap[item.transportType];
        item.templateType = templateTypeMap[item.templateType];
        item.associatedCityList =
          associatedCityListMap[item.associatedCityList];
        // console.log(associatedCityListMap[1]);
        // console.log(item.associatedCityList);
        // console.log(Object.keys(associatedCityListMap));
        // const b = Object.keys(associatedCityListMap);
        // console.log(associatedCityListMap);
        // const a = item.associatedCityList.find(
        //   (item1) => item1 === associatedCityListMap[b]
        // );
        // res11.push(a);
      });
      // console.log(res11);
    },
  },
};
</script>

<style lang="scss" scoped></style>
